<template>
  <div class="leave-container">
    <!-- 请假已审核卡片 头部 -->
    <div class="leave-title">
      <div class="line"></div>
      <div class="leave-detail">近期已审核</div>
      <div class="look-btn" v-show="tableData.length > 1">查看全部</div>
    </div>
      <!-- 卡片  主体-->
      <div class="card" v-for="(item, index) in tableData" :key="index">
        <div class="student_avatar">
          <img src="~images/common/student_avatar.png" />
        </div>
        <div class="stu-name">{{item.staff_name}}</div>
        <div class="stu-gender">{{item.staff_sex}}</div>
        <div class="tel-icon-container">
          <img class="tel-icon" src="~images/common/stu_tel.png" />
        </div>
        <div class="stu-tel">18649007205</div>
        <div class="stu-dormitory">{{item.dormitory}}</div>
        <div class="stu-class">{{item.college}}</div>
        <div class="stu-appli-icon">
          <img class="tel-icon" src="~images/common/confirm_active.png" />
        </div>
        <div class="stu-appli">申请</div>
        <div class="stu-appli-time">{{ item.start_time | formateTime}} ~ {{ item.end_time | formateTime}}</div>
        <div class="sub-time">{{ item.created_at |formateTime }}提交</div>
        <div class="leave-res">{{ item.desc }}</div>
        <div class="handler-even-icon">
          <img  src="~images/common/bohui.png" v-if="item.status === 3"/>
          <img  src="~images/common/confirm.png" v-else/>
        </div>
        <ul class="dashed-line">
          <li class="line-i"></li>
          <li class="line-i"></li>
          <li class="line-i"></li>
          <li class="line-i"></li>
        </ul>
        <div class="card-theme-bg">
          <img src="~images/watermark/water_mark_batch.png" />
        </div>
        <div :class="{'handler-even-approved':item.status=== 2,'handler-even-dismissed':item.status === 3}">已{{item.status | formateStatus}}</div>
        <div class="leave-desc">{{ item.reject_desc | formateEmpty }}</div>
        <div class="opera-time">{{ item.approval_time | formateEmpty}} {{item.status | formateStatus}}</div>
        <div class="opera-teach">批准人：{{ item.approval_people }}老师</div>
      </div>
      <!-- 无数据 -->
      <div class="no-data-bg" v-show="tableData.length < 1">
        <van-empty description="暂无数据" />
      </div>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default:()=>[],
    },
  },
}
</script>
<style lang="scss" scoped>
@import "~styles/default/aduit_card.scss";
</style>